提醒：由於看到這系列鐵人訂閱人數漸漸變多，標記一下這些內容是在「非常萌新時期」所寫，更多技術內容請參考我的 Github，歡迎跟我一起討論 ^ ^

今天開始按照原計劃學習 Mozilla 提供的 圖書館網站教學，跟著步驟建構一個 Local Library website 來學習用 Express 架設一個伺服器端網站。

前言

Express 是最受歡迎的Node web框架，還是其他許多流行的Node web框架的底層庫

• Express 為 Unopinionated框架：沒有「正確」解法，具有較高的靈活性，可以任意選擇解決方案。需培養找尋適合的套件的能力。

環境設定

又到了現階段最頭痛的環境設定時間，總是會在這遇到很多問題。

• 需求：Nodejs、NPM、 Express Application Generator（非必要）
• 安裝Node（Express 的執行環境） ＆ NPM（Node 套件管理系統）
  （這部分我的電腦先前已安裝好）
  • 可在官網下載安裝檔，或在 terminal 輸入指令安裝：

  curl -sL https://deb.nodesource.com/setup_10.x | sudo -E bash - 
  sudo apt-get install -y nodejs
  

  • 可輸入指令 node -v、npm -v確認版本
• 接著就可以用 npm 來安裝管理package（套件包）（Express 為其中一個package），Express package 包含開發 Express 所需的所有前提套件。
  • 首先讓terminal在你的專案底下輸入 npm init 建立 package.json，打開檔案可看到裡頭包含檔下開發環境的資訊（名稱、版本等）。
  • 接著安裝 Express package輸入：

  npm install express
  

  • 而在 package.json 中的 dependencies 發現多了 "express": "^4.16.4"，也就是在該專案可使用 Express
  • Dependencies：專案運行需要的套件（會被打包進最終的js文件）
    devDependencies：開發專案才需的套件（用-dev安裝）
  • 最後安裝 Express Application Generator（幫助快速建立 Express app 的基本結構）
    （這部分耗了我最多時間）
  • 一開始按照教學輸入：

  npm install express-generator -g
  

  • 結果出現了錯誤：
    
  • 錯誤顯示為權限問題，途中試了很久都無法成功，因此先用別的方法：
    直接建立新資料夾（helloworld），進到資料夾輸入：

  npx express-generator
  

  • 此步驟幫你建立好 Express app 的基本結構：
    
  • 接著你的terminal上可以看到出現提示：
    
  • 跟著提示輸入 npm install 安裝所需的dependencies。 DEBUG=helloworld:* npm start 執行。(輸入control+c可終止)
  • 然後總算完成環境設定，可以在 http://localhost:3000/ 看見你專案的頁面啦。
    

• 後續找到了解決權限問題的方法：（只要在前面補上sudo即可，他會要求輸入密碼暫時開放權限）

  sudo npm install express-generator -g
  

• 安裝好 express-generator ，就可以直接輸入以下來建立 Express app 的基本結構：

  express helloworld
  

小插曲：由於今天學習過程中，跟著範例開了一個server在port 3000，結果就蓋掉了前幾天練習React的頁面（因為他會直接開在port 3000），藉此機會簡單了解一下port的概念，然後發現再重開React，他就自動轉到port 3001啦。
（插曲中還有插曲：然後因為想寫這個小插曲回去翻了一下，才發現原來翻譯版的內容是舊的，因為他裡面並沒有這個範例，所以如果一開始看繁體中文版就不會出現這個小插曲啦ＸＤ）